<template>
  <div class="page-1 page">
    <img src="../image/face_logo.png" :class="{active: active}" class="face-logo center-horizon-position animate-03s" alt="">
    <img src="../image/face_slogan.png" :class="{active: active}" class="face-slogan center-horizon-position animate-03s" alt="">
    <img src="../image/face_img_left.png" class="face-img-left animate-03s" alt="">
    <img src="../image/face_img_right.png" class="face-img-right animate-03s" alt="">
    <img src="../image/footer.png" class="page-footer animate-03s" alt="">
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'page1',
    data(){
      return {
        active: true
      }
    },
    mounted(){

    }
  }
</script>

<style>
  .page-1 {
    background: url("../image/face_bg.png") repeat-y center;
    background-size: 100% auto;
  }
  .face-logo{
    width: 65vw;
    top: 0;
    height: auto;
    opacity: 0;
  }
  .face-slogan{
    width: 57vw;
    animation: rock 2s infinite 2s;
  }
  .face-img-left{
    width: 57vw;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .face-img-right{
    width: 45vw;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .face-logo.active{
    top: 37vw;
    opacity: 1;
  }
  .face-slogan.active{
    top: 38%;
  }
</style>
